// 引入 react 包
import React, { lazy, Suspense } from "react";
// 导入 路由包
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

// 导入 Home 组件
import Home from "./pages/Home";
const CityList = lazy(() => import("./pages/CityList"));
const Map = lazy(() => import("./pages/Map"));
const HouseDetail = lazy(() => import("./pages/Details"));
const Login = lazy(() => import("./pages/Login"));
const RentList = lazy(() => import("./pages/Rent"));
const RentAdd = lazy(() => import("./pages/Rent/Add"));
const RentSearch = lazy(() => import("./pages/Rent/Search"));
const AuthRoute = lazy(() => import("./components/AuthRoute"));

export default () => {
  return (
    <Router>
      <Suspense fallback={<div className="loading">loading...</div>}>
        {/* 重定向 */}
        <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
        <Route path="/home" component={Home}></Route>
        <Route path="/citylist" component={CityList}></Route>
        <Route path="/map" component={Map}></Route>
        {/* :id 表示路由参数，可以匹配任意内容，将来在组件中就可以获取到路由参数了*/}
        <Route path="/details/:id" component={HouseDetail}></Route>
        <Route path="/login" component={Login}></Route>

        {/* 测试：AuthRoute */}
        <AuthRoute path="/rent" exact component={RentList}></AuthRoute>
        <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
        <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
      </Suspense>
    </Router>
  );
};
